<script setup lang=ts>
	import { apiGetClassList, apiGetHistoryList } from '@/api/apis.js'
	import { gotoHome } from '@/utils/common.js'
	import { onLoad, onUnload, onReachBottom, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import { ref } from 'vue';

	const queryFrom = {
		pageNum: 1,
		pageSize: 12
	}
	const noData = ref(false)
	let pageName
	onLoad((e) => {
		let { id = null, name = null, type = null } = e
		if (type) queryFrom.type = type
		if (id) queryFrom.classid = id
		//if(!id)gotoHome()

		pageName = name
		//修改导航标题
		uni.setNavigationBarTitle({
			title: name
		})
		getClassList()
	})
	//触底方法
	onReachBottom(() => {
		if (noData.value) return
		queryFrom.pageNum++
		getClassList()
	})
	const classList = ref([])
	const getClassList = async () => {
		let res;
		if (queryFrom.classid) res = await apiGetClassList(queryFrom)
		if (queryFrom.type) res = await apiGetHistoryList(queryFrom)

		classList.value = [...classList.value, ...res.data]
		if (queryFrom.pageSize > res.data.length) {
			noData.value = true
		}
		uni.setStorageSync("storgClassList", classList.value)
	}
	//分享给好友
	onShareAppMessage(() => {
		return {
			title: "壁纸" + pageName,
			path: "/pages/classList/classList?id=" + queryFrom.classid + "&name=" + pageName
		}
	})
	//分享朋友圈
	onShareTimeline(() => {
		return {
			title: "壁纸" + pageName,
			query: "id=" + queryFrom.classid + "&name=" + pageName

		}
	})
	//离开页面把缓存清除
	onUnload(() => {
		uni.removeStorageSync("storgClassList")
	})
</script>

<template>
	<view class="classList">
		<view class="loadingLayout">
			<uni-load-more status="loading" v-if="!classList.length && !noData"></uni-load-more>
		</view>
		<view class="content">
			<navigator :url="'../preview/preview?id='+item._id" class="item" v-for="item in classList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>

		</view>
		<view class="loadingLayout">
			<uni-load-more :status="noData?'noMore': 'loading'" v-if="classList.length || noData"></uni-load-more>
		</view>
		<view class="safe-area-inset-buttom">

		</view>
	</view>
</template>



<style lang="scss" scoped>
	.classList {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;
			padding: 5rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>